$(function () {
  const layer = layui.layer;
  const form = layui.form;
  // 封装渲染函数
  initArtCateList();
  function initArtCateList() {
    $.ajax({
      type: "GET",
      url: "/my/article/cates",
      success: function (res) {
        if (res.status !== 0) return layer.msg(res.message);
        let htmlStr = template("tpl-table", res);
        $("tbody").html(htmlStr);
      },
    });
  }

  // 点击添加类别，弹出弹框
  let indexAdd = null;
  $("#addCate").on("click", function () {
    indexAdd = layer.open({
      // type是layui定义好的属性，调用可以去掉弹出层的确认按钮
      type: 1,
      title: "添加文章类别",
      area: ["500px", "250px"],
      content: $("#dialog-add").html(),
    });
  });

  // 通过事件委托，将submit事件委托给body
  $("body").on("submit", '#formAdd',function (e) {
    e.preventDefault();
    $.ajax({
      type: "POST",
      url: "/my/article/addcates",
      data: $("#formAdd").serialize(),
      success: function (res) {
        if (res.status !== 0) return layer.msg(res.message);
        // 请求成功就调用渲染函数
        initArtCateList();
        // 关闭弹出层,通过layui定义好的方法，layer.close(弹出层)
        layer.close(indexAdd);
        layer.msg(res.message);
      },
    });
  });

  // 点击编辑，弹出弹框；通过事件委托
  let indexEdit = null;
  $("tbody").on("click", ".btnEdit", function () {
    indexEdit = layer.open({
      type: 1,
      title: "修改文章类别",
      area: ["500px", "250px"],
      content: $("#dialog-edit").html(),
    });

    // 发送请求ajax
    let Id = $(this).attr("data-Id");
    // console.log(Id)
    $.ajax({
      type: "GET",
      url: `/my/article/cates/${Id}`,
      success: function (res) {
        if (res.status !== 0) return layer.msg(res.message);
        // 通过form.val() 可以给表单元素快速赋值
        // 使用需要先给form表单元素设置lay-filter=“值”
        // form.val(‘值’，数据对象)
        form.val("form-edit", res.data);
      },
    })
  })

  // 编辑发送请求,通过给body添加submit事件
  $('body').on('submit', '#formEdit', function (e) {
    e.preventDefault()
    const data = $(this).serialize()
    // console.log(data)
    $.ajax({
      type: 'POST',
      url: '/my/article/updatecate',
      data,
      success: function (res) {
        if (res.status !== 0) return layer.msg(res.message)
        // 成功后关闭弹出层
        layer.close(indexEdit)
        layer.msg(res.message)
        initArtCateList()
      }
    })
  })

  // 删除功能-绑定给tbody
  $('tbody').on('click', '.btnDel',function () {
    // 获取id
    const id = $(this).attr('data-Id')

    layer.confirm('是否确认删除', {icon: 3, title:'删除分类'}, function(index){
      $.ajax({
        type: 'GET',
        url: `/my/article/deletecate/${id}`,
        success: function (res) {
          if (res.status !== 0) return layer.msg(res.message)
          initArtCateList();
          layer.msg(res.message) 
        }
      })
      
      layer.close(index);
    });
  })
});
